تکنیک هایی که در این مطلب بیان میشه برگرفته از کتاب بهینه سازی تصاویر نوشته شده توسط Addy Osmani هست. در هر نوع سایتی که از تصاویر استفاده میکنید میتوانید از این قواعد بهره ببرید.
تصاویر مهم و بحرانی رو انتخاب کرده و اونا رو Preload کنید
به سایت خودتون نگاه بندازید و تصاویر مهم و حیاتی رو مشخص کنید. در اغلب اوقات لوگو و تصویر اصلی بالایی صفحه، تصاویری هستند که شما میخواهید در اسرع وقت لود بشن و نمایش داده بشن. اینجا هست که میتوانیم از ویژگی Preload استفاده کنیم. ویژگی Preload به مرورگر میگه که کدام تصاویر اولویت دارن و قبل از تجزیه و تحلیل محتوا باید اونا رو دریافت کنه و نمایش بده.
شما میتوانید از اون برای هر چیزی استفاده کنید ولی باید در نظر داشته باشید که به جز در موارد ضروری و تصایر حیاتی از این مورد استفاده نکنید. فرض کنید که میخواهیم تصویر اصلی یک سایت رو Preload کنیم. برای اینکار بصورت زیر عمل میکنیم:
<link rel="preload" href="/img/logo.svg" as="image">
کد بالا رو در قسمت Head سایت خودتون قرار بدین. شما همچنین میتوانید از Preload در هدرهای HTTP استفاده کنید. بصورت زیر:
Link: </img/logo.svg>; rel=preload; as=image
در تصویر زیر دو حالت مختلف از لود شدن تصویر رو مشاهده میکنید که تفاوت استفاده یا عدم استفاده از Preload در اون مشخص شده است:
همونطور که میبینید در مثال بالا تصویر در حالت Preload تقریبا 0.5 ثانیه زودتر لود و نمایش داده شده است. پس در مواقع ضروری از این ویژگی استفاده کنید و تصاویر اصلی خودتون رو زودتر در اختیار کاربر قرار بدین.
کدهای SVG را بصورت اتوماتیک ساده سازی کنید
بهینه سازی SVG با بهینه سازی انواع تصاویر دیگه تفاوت داره چون برخلاف تصاویر PNG و JPG ، تصاویر SVG بصورت متنی هستند و شبیه به کدهای XML هست. پس شما از هر روشی که برای فشرده سازی متون استفاده میکنید، میتوانید برای بهینه سازی SVG نیز استفاده کنید. علاوه برای این موارد شما میتوانید از ابزار SVGO استفاده کنید و سایز فایلهای SVG خودتون رو پایین بیارید.
ابزار SVGO امکانات و ویژگی های زیادی رو در اختیارتون قرار میده که با استفاده از اونا میتوانید بصورت کامل بر روی فایلهای SVG خودتون مدیریت داشته باشید و اون چیزای اضافی رو حذف کنید و با اینکار حجم SVG خودتون رو کاهش بدید.
شما با استفاده از نرم افزارهای گرافیکی مثل Adobe Illustrator که SVG رو به وجود میارید، میتوانید بصورت اتوماتیک مسیرهای SVG رو ساده سازی کنید و با اینکار سایز تصاویر SVG خودتون رو کاهش بدین. تصویر زیر رو ببینید:
تصویر سمت چپ، تصویر اولیه هست و همونطور که مشاهده میکنید 251 نقطه داره و حجم اون تقریبا 21 کیلوبایت هست. زمانی که تصویر رو ساده سازی میکنید، تفاوت چندانی در ظاهر اون به وجود نمیاد ولی تعداد نقاط اون به 152 عدد میرسه و حجم اون هم تقریبا 5 کیلوبایت کاهش پیدا میکنه. شما با این روش ساده و اتوماتیک مسیرهای SVG رو ساده سازی کردید.
تبدیل تصاویر انیمیشنی GIF به ویدیو
همه ما GIF های خوب رو دوست داریم و از اونا زیاد استفاده میکنیم. شما با استفاده از GIF میتوانید تقریبا هر چیزی رو نمایش بدین ولی مشکلی که دارن اینه که حجم زیادی دارن و نمیشه اونا رو متوقف کرد و ...
ابزارهای زیادی مثل gifsicle و ... وجود دارند که با استفاده از اونا میتوانید سایز تصاویر GIF رو تا حدی پایین بیارید ولی بازم این مقدار کاهش حجم خیلی چشم گیر نیست و بازم با حجم اون مشکل داریم و بقیه مشکلات GIF هم سر جای خودش باقی میمونه.
تکنیکی که در اینجا میتوانید از اون استفاده کنید، تبدیل فایلهای GIF به ویدیو هست. بعد از تبدیل به ویدیو میتوانید اونا رو با استفاده از تگ Video در صفحات خودتون وارد کنید و به کاربران نمایش بدین.
شما با استفاده از روشهای مختلف میتوانید این تبدیل رو انجام بدین. یکی از این راه ها استفاده از ابزار FFMpeg هست. با استفاده از این ابزار به راحتی میتوانید GIF رو به فرمتهای MP4 یا OGV یا WEBM و ... تبدیل کنید. برای اینکار میتوانید از دستورات زیر استفاده کنید:
1- ffmpeg -i animated.gif -b:v 512K animated.webm
2- ffmpeg -i animated.gif -b:v 512K animated.ogv
3- ffmpeg -i animated.gif -b:v 512K animated.mp4
در دستورات بالا بعد از i یا input میتوانید فایل GIF ورودی رو مشخص کنید و با استفاده از b هم میتوانید bitrate اون رو مشخص کنید. در نهایت هم نام و فرمت فایل خروجی رو مشخص میکنیم. در یک تست انجام شده یک فایل GIF ورودی با حجم 989 کیلوبایت به ویدیو تبدیل شده و سایز اون بصورت زیر شده است:
- سایز 155 کیلوبایت در فرمت MP4
- سایز 109 کیلوبایت در فرمت OGV
- سایز 85 کیلوبایت در فرمت WebM
با اینکه این تغییر فرمت سایز خیلی زیادی رو کم میکنه ولی کیفیت ویدیو ساخته شده خیلی با GIF اولیه تفاوت نداره. حالا شما میتوانید این ویدیوهای ساخته شده رو درون کدهای HTML خودتون قرار بدین. بصورت زیر:
<video preload="none">
<source src="/videos/animated.webm" type="video/webm">
<source src="/videos/animated.ogv" type="video/ogg">
<source src="/videos/animated.mp4" type="video/mp4">
</video>
با اینکار اولین فرمتی که توسط مرورگر پشتیبانی بشه انتخاب میشه و در مرورگر نمایش داده میشه.
لود کردن تصاویر با استفاده از IntersectionObserver
احتمالا زیاد از تکنیک Lazy loading برای لود کردن تصاویر استفاده کرده باشید. ولی بیشتر ابزارهایی که برای اینکار مورد استفاده قرار میگیره زیاد از CPU استفاده میکنن چون در هر لحظه موقعیت فعلی اسکرول صفحه رو بررسی میکنن و با توجه به اون تصمیم میگیرن که تصویر مورد نظر باید لود بشه یا خیر. دستگاه هایی که CPU ضعیفی دارند در این مواقع به مشکل بر میخورن و سایت شما رو با اختلال مواجه میکنه.
خوشبختانه با استفاده از Intersection Observer API میتوانید خیلی ساده تر و بهینه تر اینکار رو انجام بدین و متوجه بشید که تصویر چه زمانی وارد Viewport میشه و در همون زمان تصویر مورد نظر رو لود کنید تا کاربر بتونه اون رو مشاهده بکنه. نحوه استفاده از این API رو در ادامه توضیح میدیم. در ابتدا تصویر رو در کدهای HTML قرار میدیم:
<img class="lazy" data-src="/images/lazy-loaded-image.jpg" src="/images/placeholder.jpg" alt="I'm lazy." width="320" height="240">
همونطور که میبینید در src یک تصویر placeholder یا اولیه قرار دادیم تا زمانی که تصویر اصلی لود نشده است اون رو نمایش میدیم. تصویری که میخوایم بصورت Lazy load با استفاده از API اون رو لود کنیم درون ویژگی data-src قرار میدیم. حالا میتونیم با استفاده از کلاس در Javascript به این تصویر دسترسی داشته باشیم و کارهای مورد نظرمون رو انجام بدیم. بصورت زیر:
document.addEventListener("DOMContentLoaded", function(){
if("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
elements = document.querySelectorAll("img.lazy");
var imageObserver = new IntersectionObserver(function(entries, observer){
entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
entry.target.classList.remove("lazy");
imageObserver.unobserve(entry.target);
}
});
});
elements.forEach(function(image){
imageObserver.observe(image);
});
}
});
همونطور که میبینید در ابتدا بررسی شده که Intersection API در مرورگر کاربر پشتیبانی میشه یا خیر. بعد از اون تصاویری که در Viewport قرار میگیرن رو لود میکنیم.
امیدواریم با استفاده از تکنیک هایی که اینجا بیان کردیم به بهینه سازی تصاویر در وب سایت شما کمک کرده باشیم
- طراحی سایت شرکتی
- طراحی سایت فروشگاهی
- طراحی سایت تهران
- طراحی سایت
- طراحی وب سایت
- طراحی سایت شرکتی
- طراحی سایت فروشگاهی
- طراحی سایت تهران
- طراحی سایت
- طراحی وب سایت
- طراحی سایت شرکتی
- طراحی سایت فروشگاهی
- طراحی سایت تهران
- طراحی سایت
.
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
